<template>
    <link rel="stylesheet" href="/layui/css/admin.css" media="all">
    <div id="LAY_app">
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <!-- 头部区域 -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item layadmin-flexible" lay-unselect>
                        <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                            <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;" layadmin-event="refresh" title="刷新">
                            <i class="layui-icon layui-icon-refresh-3"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item layui-hide-xs" lay-unselect>
                        <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search"
                            layadmin-event="serach" lay-action="template/search.html?keywords=">
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right" style="margin-right:30px;">
                    <% customizeBut.forEach(function(item,index){ %>
                    <% if(item.openPage){ %>
                    <li class="layui-nav-item" lay-unselect>
                        <a lay-href="<%= item.openPage.href %>" layadmin-event="<%= item.type %>"
                            lay-text="<%= item.openPage.title %>">
                            <i class="layui-icon <%= item.icon %>"></i>
                            <% if(item.openPage.redDot){ %>
                            <!-- 如果有新消息，则显示小圆点 -->
                            <span red-dot="<%= item.openPage.redDot %>" v-show="{{<%= item.openPage.redDot %>}}"
                                class="layui-badge-dot"></span>
                            <% } %>
                        </a>
                    </li>
                    <% } else { %>
                    <li class="layui-nav-item layui-hide-xs" lay-unselect>
                        <a href="javascript:;" layadmin-event="<%= item.type %>">
                            <i class="layui-icon <%= item.icon %>"></i>
                        </a>
                    </li>
                    <% } %>
                    <% }); %>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;">
                            <cite id="nickname"></cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                            <dd><a lay-href="set/user/password.html">修改密码</a></dd>
                            <hr>
                            <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <!-- 侧边菜单 -->
            <div class="layui-side layui-side-menu">
                <div class="layui-side-scroll">
                    <div class="layui-logo" lay-href="home/console.html">
                        <span><%= projectName %></span>
                    </div>
                    <ul class="layui-nav layui-nav-tree beg-navbar" lay-shrink="all" id="LAY-system-side-menu"
                        lay-filter="layadmin-system-side-menu">
                    </ul>
                </div>
            </div>

            <!-- 页面标签 -->
            <div class="layadmin-pagetabs" id="LAY_app_tabs">
                <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
                <div class="layui-icon layadmin-tabs-control layui-icon-down">
                    <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                        <li class="layui-nav-item" lay-unselect>
                            <a href="javascript:;"></a>
                            <dl class="layui-nav-child layui-anim-fadein">
                                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                    <ul class="layui-tab-title" id="LAY_app_tabsheader">
                        <li lay-id="<%= defaultPage.href %>" lay-attr="<%= defaultPage.href %>" class="layui-this"><i
                                class="layui-icon <%= defaultPage.icon %>"></i></li>
                    </ul>
                </div>
            </div>


            <!-- 主体内容 -->
            <div class="layui-body" id="LAY_app_body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe src="<%= defaultPage.href %>" frameborder="0" class="layadmin-iframe"></iframe>
                </div>
            </div>

            <!-- 辅助元素，一般用于移动设备下遮罩 -->
            <div class="layadmin-body-shade" layadmin-event="shade"></div>
        </div>
    </div>
</template>
<script name="compile">
    function templateCompile(data) {
        var defaultData = {
            customizeBut: [],
            projectName: "后台管理"
        };
        var newData = Object.assign(defaultData, data);
        var callback = {
            success: true,
            result: newData
        };
        if (!newData.nickname) {
            return {
                success: false,
                result: "请输入右上角用户昵称"
            };
        }
        if (!newData.customizeBut instanceof Array) {
            return {
                success: false,
                result: "参数customizeBut必须为数组"
            };
        }
        if (!newData.defaultPage) {
            return {
                success: false,
                result: "请输入默认打开页面信息"
            };
        }
        if (!newData.leftNav) {
            return {
                success: false,
                result: "请输入左边导航信息"
            };
        }
        if (!newData.leftNav instanceof Array) {
            return {
                success: false,
                result: "参数leftNav必须为数组"
            };
        }
        try {
            newData.leftNav = JSON.stringify(newData.leftNav);
        } catch (error) {
            return {
                success: false,
                result: "leftNav数组转换为字符串失败"
            };
        }
        callback.success = true;
        callback.result = newData;
        return callback;
    }
</script>
<script name="templateScript">
    console.log(layui);
    $("#nickname").text(pageData.<%= nickname %>);
    var navbar = layui.navbar();
    // 设置navbar
    navbar.set({
        spreadOne: true,　　//设置是否只展开一个二级菜单
        elem: "#LAY-system-side-menu",　　//存在组件的容器
        data: <%- leftNav %>,　　//提供给组件的数据列表，请严格按照规定格式提供。
    });
    navbar.render();
    //&&scriptchildren&&
</script>